{% load static %}
{#{% load media %}#}

<!DOCTYPE html>
<html>
<head>
    <title>丹青</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="{% static 'js/jquery-3.7.1.js' %}"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>


        /* 全局自适应变量 */
        :root { --cell-size: 10px; }

        /* 容器样式 */
        .biaoqian {
            position: relative; /* 相对定位 */
            width: 100%; /* 自适应宽度 */
            min-height: 56px; /* 容器高度 */
            overflow-x: auto; /* 小屏可横向滚动 */
            white-space: nowrap;
        }
        /* 隐藏原顶部标签按钮，仅保留颜色与时间控件 */
        .biaoqian .tab-button { display: none; }

        /* 移除绝对定位，使用相对定位，确保颜色选择器和时间输入框能跟随拖动 */
        .grid-tools input[type="color"],
        .grid-tools input[type="number"] {
            position: relative;
            float: none;
            vertical-align: middle;
        }

        /* 颜色选择器样式 */
        #colorPicker, #colorPicker-dianying, #colorPicker-game, #colorPicker-shehui, #colorPicker-ditu {
            width: 30px;
            height: 30px;
            border-radius: 5px;
            border: 1px solid rgba(14, 14, 14, 0.7);
            margin: 0 4px;
        }

        /* 数字输入框样式 */
        #last-time, #last-time-dianying, #last-time-game, #last-time-shehui, #last-time-ditu {
            width: 40px;
            height: 28px;
            border: 1px solid rgba(14, 14, 14, 0.7);
            border-radius: 5px;
            font-size: 14px;
            color: #333;
            background-color: #f1f1f1;
            margin: 0 4px;
        }

        .tab-button {
            padding: 20px; /* 根据需要调整填充 */
            border: none;
            background-color: #f1f1f1;
            cursor: pointer;
            margin-right: 0; /* 设置为0，消除间隙 */
            font-size: 18px; /* 根据需要调整字体大小 */
            display: inline-block; /* 使选项卡在同一行显示 */
            font-weight: normal; /* 默认字体粗细 */
            font-style: normal; /* 激活状态字体样式为正常 */
            border-radius: 5px; /* 设置圆角 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
        }

        .tab-button.active {
            background-color: #148fe7;
            font-weight: bold; /* 激活状态字体粗细为粗体 */
            font-style: italic; /* 默认字体样式为斜体 */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* 激活状态增加阴影深度 */
        }
        .tab-content {
            display: none;
            padding: 0;
            border: 1px solid #ccc;
            margin-top: 0;
        }

        .tab-content.active {
            display: block;
        }

        .button-container {
            position: relative;
            width: 100%;
            max-width: 1005px;
            height: 62vh;
            min-height: 420px;
            overflow: auto;
            border: 2px solid #1c1b1b;
            padding: 1px;
            margin: 0 auto;
        }
        /* 绘制区域悬浮工具 */
        .grid-tools { position: absolute; top: 10px; right: 10px; z-index: 20; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.9); border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
.grid-tools button { padding: 4px 8px; border: 1px solid #d1d5db; background: #fff; border-radius: 6px; cursor: pointer; font-size: 12px; }
.grid-tools span { font-size: 12px; color: #374151; min-width: 48px; text-align: center; }

/* 刷新按钮样式 */
.refresh-button { padding: 4px 8px; border: 1px solid #d1d5db; background: #fff; border-radius: 6px; cursor: pointer; font-size: 16px; transition: all 0.2s ease; } 
.refresh-button:hover { background: #f3f4f6; border-color: #9ca3af; }
.tools-handle { width: 16px; height: 16px; cursor: move; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #6b7280; gap: 1px; }
.tools-handle span { display: none; }
        .dot { width: 2px; height: 2px; background-color: #6b7280; border-radius: 50%; }

        .button-grid {
            display: grid;
            grid-template-columns: repeat(100, var(--cell-size));
            grid-gap: 0;
        }

        .button-grid button {
            width: var(--cell-size);
            height: var(--cell-size);
            border: 0;
        }

        .button-grid button:hover {
            border: 1px solid rgba(238, 10, 10, 0.7);
        }

        .glow-button {
            box-shadow: 2.5px 2px 5px rgba(238, 10, 10, 0.7);
            transition: box-shadow 0.5s ease;
        }

        .popover {
            position: absolute;
            background: #f5f5f5;
            border: 1px solid #e1e8ed;
            border-radius: 5px;
            padding: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
            display: none;
            width: 300px;
            z-index: 2000;
        }

        .popover textarea {
            width: 97%;
            height: 70px;
            margin-bottom: 5px;
            padding: 5px;
            border: 1px solid #d1d5da;
            border-radius: 4px;
            resize: none;
        }

        .popover .confirm-button {
            background-color: #1da1f2;
            color: #ffffff;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 25px;
            display: block;
            margin-top: 10px;
        }

        .popover .char-count {
            position: absolute;
            right: 10px;
            bottom: 10px;
            font-size: 12px;
            color: #657786;
        }

        .popover {
            background: #f5f5f5;
            border: 1px solid #e1e8ed;
            border-radius: 5px;
            padding: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
            display: none;
            width: 350px;
            z-index: 2000;
        }

        .popover .button-container1 {
            display: flex;
            justify-content: flex-start;
            margin-top: 1px;
        }

        .popover .cancel-button {
            background-color: #d5dade;
            color: #1c1b1b;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 25px;
            display: block;
            margin-top: 10px;
        }

        .popover .count-text {
            background-color: #d5dade;
            color: #1c1b1b;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 25px;
            display: block;
            margin-top: 10px;
        }

        .container {
            display: flex; /* 设置为flex布局 */
            justify-content: space-between; /* 子元素之间保持间隔 */
        {#margin: 10px; /* 水平居中 */#} width: 100%; /* 根据需要调整宽度 */
            gap: 12px;
            flex-wrap: wrap;
        }

        .column {
        {#flex: 1; /* 平均分配空间 */#} margin: 0 10px; /* 列之间的间隔 */
        {#margin: 50%; /* 列之间的间隔 */#}
        }

        .column1 {
        {#flex: 0 1 1005px;#} flex: 1 1 62%;
            margin: 0; /* 列之间的间隔 */
            min-width: 300px;
        }

        .column2 { display: none; }

        .column3 { display: none; }

        /* 悬浮面板 - 改为相对定位 */
        .floating-panel {
            position: absolute;
            z-index: 1300;
            width: min(92vw, 380px);
            max-height: 72vh;
            overflow: auto;
            background: rgba(255,255,255,0.96);
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            padding: 12px;
            display: none;
        }
        #searchPanel { left: 0; right: auto; }
        .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
        .panel-header h3 { margin: 0; font-size: 16px; }
        .panel-close { border: none; background: transparent; font-size: 18px; cursor: pointer; }

        /* 左侧滑出菜单 - 改为相对定位 */
        #menuToggle { padding: 10px 14px; border: 1px solid #d1d5db; background: #fff; border-radius: 6px; cursor: pointer; }
        #sideMenu { position: absolute; top: 0; left: 0; width: 220px; max-width: 82vw; height: calc(100vh - 64px); background: rgba(255,255,255,0.98); border-right: 1px solid #e5e7eb; box-shadow: 10px 0 24px rgba(17,24,39,0.10); transform: translateX(-100%); transition: transform .25s ease; z-index: 1200; display: flex; flex-direction: column; padding: 14px; gap: 10px; backdrop-filter: saturate(120%) blur(4px); }
        #sideMenu.open { transform: translateX(0); }
        #sideMenu .menu-title { font-size: 14px; color: #6b7280; padding: 6px 8px; }
        #sideMenu .menu-item { position: relative; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 10px; background: #ffffff; text-align: left; font-size: 16px; cursor: pointer; color: #111827; transition: background .15s ease, border-color .15s ease, color .15s ease; display: flex; align-items: center; gap: 8px; }
        #sideMenu .menu-item:hover { background: #f3f4f6; }
        #sideMenu .menu-item.active { background: linear-gradient(180deg, #1d9bf0 0%, #148fe7 100%); border-color: #148fe7; color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }
        #sideMenu .menu-item.active::before { content: ""; position: absolute; left: -6px; top: 10px; bottom: 10px; width: 4px; border-radius: 2px; background: #148fe7; }

        .photo {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            float: left;
        }

        .info {
            float: right;
            width: 300px;
        }

        .name {
            font-size: 24px;
            font-weight: bold;
        }

        .company {
            font-size: 18px;
        }

        .address {
            font-size: 16px;
        }

        .phone {
            font-size: 16px;
        }

        .qi-gai {
            position: fixed;
            bottom: 0;
            right: 5%;
            transform: translateX(-50%); /* 使图像水平居中 */
            z-index: -1; /* 如果需要，可以调整图像的层叠顺序 */
        }

        #avatarModal {
        display: none;
        position: fixed;
        z-index: 1400;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.4);
    }

    .modal-content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 30%;
        max-width: 500px;
    }

    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    #userAvatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
    }
    #userAvatar1 {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        cursor: pointer;
    }
    #previewAvatar {
        width: 100%;
        max-width: 300px;
        height: auto;
        border-radius: 50%;
        margin-top: 20px;
    }
.title {

    align-items: center; /* 垂直居中对齐子元素 */
    width: 100%; /* 容器宽度设置为100% */
}

.profile-container {
    display: flex; /* 使用flex布局 */
    justify-content: space-between; /* 将子元素分布在容器两端 */
    width: 100%; /* 容器宽度设置为100% */
}

.profile-self {
    /* 这里不需要特别的样式，因为它会默认左对齐 */
}

.profile-info {
    display: flex; /* 使.profile-info内部的元素水平排列 */
    align-items: center; /* 垂直居中对齐内部的元素 */
    margin-right: 10px; /* 在头像和用户名之间添加间距 */
}
.profile-info img {
    margin-right: 10px; /* 在头像和用户名之间添加间距 */
}
.profile-info span {
    margin-right: 10px; /* 在头像和用户名之间添加间距 */
}
#info-container {
  overflow: hidden; /* 清除浮动 */
}

#other_name, #company {
  display: inline-block; /* 使得元素并排显示 */
  vertical-align: central;
}

        /* 地图卡片与工具栏样式 */
        body.bg-gif {
            background-image: none;
            background-color: #ffffff;
        }
        body.no-bg { background: #ffffff; }

        #map-wrapper { position: relative; width: 100%; max-width: 1005px; margin: 0 auto; border-radius: 8px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
        #container { width: 100%; height: 62vh; min-height: 420px; }
        .map-toolbar { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(255,255,255,0.9); border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
        .map-toolbar button { padding: 6px 10px; border: 1px solid #d1d5db; background: #fff; border-radius: 6px; cursor: pointer; font-size: 12px; }
        .map-toolbar button:hover { background: #f3f4f6; }
        .map-toolbar .divider { width: 1px; height: 18px; background: #e5e7eb; margin: 0 4px; }
        .map-toolbar label { font-size: 12px; color: #374151; }
        .map-toolbar input[type="color"] { width: 28px; height: 28px; padding: 0; border: 1px solid #d1d5db; border-radius: 4px; background: #fff; }
        /* 响应式断点 */
        @media (max-width: 600px) {
            :root { --cell-size: 6px; }
            .button-container { height: 58vh; min-height: 360px; }
            .tab-button { padding: 12px; font-size: 14px; }
            .profile-info span { display: none; }
            .profile-info img { margin-right: 6px; }
            .map-toolbar { transform: scale(0.92); transform-origin: top left; }
            .grid-tools { transform: scale(0.98); transform-origin: top right; }
        }

        @media (min-width: 601px) and (max-width: 1024px) {
            :root { --cell-size: 8px; }
            .button-container { height: 60vh; min-height: 380px; }
            .tab-button { padding: 16px; font-size: 16px; }
        }

        @media (min-width: 1400px) {
            :root { --cell-size: 12px; }
            .button-container { height: 66vh; }
        }
    </style>
</head>
<body class="bg-gif">
{% csrf_token %}
<div class="title">
    <div class="profile-card">
        <div class="profile-container">
            <div class="profile-self">
                <button id="menuToggle" style="margin-right: 10px;">☰</button>
                <button id="openSearch" class="tab-button" style="padding:10px 14px; margin-left:8px;">搜索</button>
            </div>
        </div>
    </div>
</div>


<div class="biaoqian">

    <button id="tab-baiban" class="tab-button active">白板</button>
    <button id="tab-game" class="tab-button">游戏</button>
    <button id="tab-dianying" class="tab-button">电影</button>
    <button id="tab-shehui" class="tab-button">社会</button>
    <button id="tab-ditu" class="tab-button">地图</button>

</div>

<div class="container">
    <div class="column column1">
        <!-- 白板 -->
        <div id="content-baiban" class="tab-content active">
            <div class="button-container">
                <div class="grid-tools" id="grid-tools-baiban" style="cursor: move;">
                    <div class="tools-handle">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>
                    <button type="button" class="grid-minus">-</button>
                    <span id="gridSizeLabel">10px</span>
                    <button type="button" class="grid-plus">+</button>
                    <input type="color" id="colorPicker" title="修改格子颜色" value="#000000">
                    <input type="number" id="last-time" min="1" max="720" value="1" title="格子存在时间(分钟)">
                    <button type="button" class="refresh-button" onclick="refreshCurrentTab()" title="刷新当前标签绘图区域">↻</button>
                </div>
                <div class="button-grid">
                    {% for button, color, count_c in p_buttons_content_baiban %}
                        <button id="button-{{ button }}" data-id="{{ button }}" class="button-grid-item" style="background-color: {{ color }};" onclick="handleClick(this)"></button>
                    {% endfor %}
                </div>
            </div>
            <div class="popover" id="popover-default"></div>
        </div>
        <!-- 游戏内容 -->
        <div id="content-game" class="tab-content">
            <div class="button-container">
                <div class="grid-tools" id="grid-tools-game" style="cursor: move;">
                    <div class="tools-handle">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>
                    <button type="button" class="grid-minus">-</button>
                    <span id="gridSizeLabel">10px</span>
                    <button type="button" class="grid-plus">+</button>
                    <input type="color" id="colorPicker-game" title="修改格子颜色" value="#000000">
                    <input type="number" id="last-time-game" min="1" max="720" value="1" title="格子存在时间(分钟)">
                    <button type="button" class="refresh-button" onclick="refreshCurrentTab()" title="刷新当前标签绘图区域">↻</button>
                </div>
                <div class="button-grid">
                    {% for button, color, count_c in p_buttons_content_game %}
                        <button id="button-{{ button }}" data-id="{{ button }}" class="button-grid-item" style="background-color: {{ color }};" onclick="handleClick(this)"></button>
                    {% endfor %}
                </div>
            </div>
            <div class="popover" id="popover-default"></div>
        </div>
        <!-- 电影内容 -->
        <div id="content-dianying" class="tab-content">
            <div class="button-container">
                <div class="grid-tools" id="grid-tools-dianying" style="cursor: move;">
                    <div class="tools-handle">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>
                    <button type="button" class="grid-minus">-</button>
                    <span id="gridSizeLabel">10px</span>
                    <button type="button" class="grid-plus">+</button>
                    <input type="color" id="colorPicker-dianying" title="修改格子颜色" value="#000000">
                    <input type="number" id="last-time-dianying" min="1" max="720" value="1" title="格子存在时间(分钟)">
                    <button type="button" class="refresh-button" onclick="refreshCurrentTab()" title="刷新当前标签绘图区域">↻</button>
                </div>
                <div class="button-grid">
                    {% for button, color, count_c in p_buttons_content_dianying %}
                        <button id="button-{{ button }}" data-id="{{ button }}" class="button-grid-item" style="background-color: {{ color }};" onclick="handleClick(this)"></button>
                    {% endfor %}
                </div>
            </div>
            <div class="popover" id="popover-default"></div>
        </div>
        <div id="content-shehui" class="tab-content">
            <div class="button-container">
                <div class="grid-tools" id="grid-tools-shehui" style="cursor: move;">
                    <div class="tools-handle">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>
                    <button type="button" class="grid-minus">-</button>
                    <span id="gridSizeLabel">10px</span>
                    <button type="button" class="grid-plus">+</button>
                    <input type="color" id="colorPicker-shehui" title="修改格子颜色" value="#000000">
                    <input type="number" id="last-time-shehui" min="1" max="720" value="1" title="格子存在时间(分钟)">
                    <button type="button" class="refresh-button" onclick="refreshCurrentTab()" title="刷新当前标签绘图区域">↻</button>
                </div>
                <div class="button-grid">
                    {% for button, color, count_c in p_buttons_content_shehui %}
                        <button id="button-{{ button }}" data-id="{{ button }}" class="button-grid-item" style="background-color: {{ color }};" onclick="handleClick(this)"></button>
                    {% endfor %}
                </div>
            </div>
            <div class="popover" id="popover-default"></div>
        </div>
        <!-- 地图内容 -->
        <div id="content-ditu" class="tab-content">
            <div class="button-container" style="border: none; padding: 0;">
                <div class="grid-tools" id="grid-tools-ditu" style="cursor: move;">
                    <div class="tools-handle">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>
                    <button type="button" class="grid-minus">-</button>
                    <span id="gridSizeLabel">10px</span>
                    <button type="button" class="grid-plus">+</button>
                    <input type="color" id="colorPicker-ditu" title="修改格子颜色" value="#000000">
                    <input type="number" id="last-time-ditu" min="1" max="720" value="1" title="格子存在时间(分钟)">
                </div>
                <div id="map-wrapper">
                    <div id="container"></div>
                    <div class="map-toolbar">
                        <button id="changeToNormal">默认</button>
                        <button id="changeToSatellite">卫星</button>
                        <button id="changeToRoadNet">路网</button>
                        <button id="changeToBuildings">3D</button>
                        <div class="divider"></div>
                        <button id="zoomInBtn">+</button>
                        <button id="zoomOutBtn">-</button>
                        <button id="locateBtn">定位</button>
                        <div class="divider"></div>
                        <label>颜色:</label>
                        <input type="color" id="fillColor" value="#FFCCFF">
                        <button id="drawSquareBtn">矩形</button>
                </div>
            </div>
        </div>
    </div>
</div>

    <!-- 右侧两列隐藏，改为悬浮面板 -->
</div>

<!-- 左侧滑出菜单 -->
<div id="sideMenu">
    <div class="menu-title">主题</div>
    <button class="menu-item" data-tab="baiban">白板</button>
    <button class="menu-item" data-tab="game">游戏</button>
    <button class="menu-item" data-tab="dianying">电影</button>
    <button class="menu-item" data-tab="shehui">社会</button>
    <button class="menu-item" data-tab="ditu">地图</button>
    <div style="flex:1"></div>
    <div class="profile-info side-menu-profile">
        {% if user_info.avatar_url %}
            <img id="userAvatar" src="{{ user_info.avatar_url }}" alt="User Avatar" onclick="increaseUserStats()">
        {% else %}
            <img id="userAvatar" src="{% static 'image/33.png' %}" alt="User Avatar" onclick="increaseUserStats()">
        {% endif %}
        <span>{{ user.username }}</span>
        <a href="/logout/" class="logout-button" style="margin-left: auto;">
            <button style="padding: 6px 12px; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; cursor: pointer;">退出登录</button>
        </a>
    </div>
    <div style="text-align: center; color: #666; font-size: 14px; padding: 10px 0;">版本 v0.1</div>
    <div style="text-align: center; opacity: 0.5; color: #999; font-size: 12px; padding: 5px 0;">&nbsp;</div>
</div>

<script src= {% static 'js/button_on.js' %}></script>
<script>

    // Avatar modal helpers (defer element query to call time)
function getAvatarModal() { return document.getElementById('avatarModal'); }
function openModal() { var m = getAvatarModal(); if (m) { m.style.display = 'block'; } }
function closeModal() { var m = getAvatarModal(); if (m) { m.style.display = 'none'; } }
window.onclick = function(event) { var m = getAvatarModal(); if (event.target == m) { m.style.display = 'none'; } }

// Preview uploaded image
function previewFile() {
    const preview = document.getElementById('previewAvatar');
    const file = document.querySelector('input[type=file]').files[0];
    const reader = new FileReader();

    reader.onloadend = function() {
        preview.src = reader.result;
        preview.hidden = false;
    }

    if (file) {
        reader.readAsDataURL(file);
    } else {
        preview.src = "";
        preview.hidden = true;
    }
}

// Upload avatar
function uploadAvatar() {
    var formData = new FormData(document.getElementById('avatarForm'));
    fetch('/upload_avatar/', {
        method: 'POST',
        body: formData,
    })
    .then(response => response.json())
    .then(data => {
        if (data.url) {
            console.log(data.url)
            var topAvatar = document.getElementById('userAvatar');
            var panelAvatar = document.getElementById('userAvatar1');
            if (topAvatar) topAvatar.src = data.url;
            if (panelAvatar) panelAvatar.src = data.url;
            closeModal();
        } else {
            alert(data.error);
        }
    })
    .catch(error => console.error('Error:', error));
}



    // 控制last-time组件在对应标签下显示
    function updateLastTimeVisibility(tabId) {
        // 对于白板标签，隐藏所有时间输入组件
        if (tabId === 'baiban') {
            // 隐藏所有时间输入组件
            document.getElementById('last-time')?.style.setProperty('display', 'none', 'important');
            document.getElementById('last-time-game')?.style.setProperty('display', 'none', 'important');
            document.getElementById('last-time-dianying')?.style.setProperty('display', 'none', 'important');
            document.getElementById('last-time-shehui')?.style.setProperty('display', 'none', 'important');
            document.getElementById('last-time-ditu')?.style.setProperty('display', 'none', 'important');
        } else {
            // 移除所有时间输入组件的important样式限制
            const allTimeInputs = document.querySelectorAll('[id^="last-time"]');
            allTimeInputs.forEach(function(input) {
                input.style.removeProperty('display');
            });
            
            // 对于当前激活的标签，显示其时间输入组件，隐藏其他标签的
            const activeLastTime = getActiveLastTimeInput();
            if (activeLastTime) {
                activeLastTime.style.display = 'block';
                
                // 隐藏其他非激活标签的时间输入组件
                allTimeInputs.forEach(function(input) {
                    if (input !== activeLastTime) {
                        // 对于非激活标签页的时间组件，直接设置为none，不使用important
                        input.style.display = 'none';
                    }
                });
            }
        }
    }
    
    // 初始加载时设置可见性
    updateLastTimeVisibility('baiban'); // 默认显示白板标签，隐藏last-time组件
    
    // 获取当前激活标签的颜色选择器
    function getActiveColorPicker() {
        // 获取当前激活的标签
        const activeTab = document.querySelector('.tab-button.active');
        if (!activeTab) return null;
        
        const tabId = activeTab.id.replace('tab-', '');
        
        // 如果是白板标签，使用主colorPicker
        if (tabId === 'baiban') {
            return document.getElementById('colorPicker');
        }
        
        // 其他标签使用对应的colorPicker
        return document.getElementById('colorPicker-' + tabId) || document.getElementById('colorPicker');
    }
    
    // 获取当前激活标签的时间输入框
    function getActiveLastTimeInput() {
        // 获取当前激活的标签
        const activeTab = document.querySelector('.tab-button.active');
        if (!activeTab) return null;
        
        const tabId = activeTab.id.replace('tab-', '');
        
        // 如果是白板标签，使用主last-time
        if (tabId === 'baiban') {
            return document.getElementById('last-time');
        }
        
        // 其他标签使用对应的last-time
        return document.getElementById('last-time-' + tabId) || document.getElementById('last-time');
    }
    
    // 同步所有标签页的颜色和时间值
    function syncAllTabValues() {
        const activeColorPicker = getActiveColorPicker();
        const activeLastTimeInput = getActiveLastTimeInput();
        
        // 如果有激活的颜色选择器，使用其值；否则使用白板标签的默认值
        const activeColor = activeColorPicker ? activeColorPicker.value : '#ffffff';
        const activeTime = activeLastTimeInput ? activeLastTimeInput.value : '1';
        
        // 更新所有颜色选择器
        document.getElementById('colorPicker')?.setAttribute('value', activeColor);
        document.getElementById('colorPicker-game')?.setAttribute('value', activeColor);
        document.getElementById('colorPicker-dianying')?.setAttribute('value', activeColor);
        document.getElementById('colorPicker-shehui')?.setAttribute('value', activeColor);
        document.getElementById('colorPicker-ditu')?.setAttribute('value', activeColor);
        
        // 更新所有时间输入框
        document.getElementById('last-time')?.setAttribute('value', activeTime);
        document.getElementById('last-time-game')?.setAttribute('value', activeTime);
        document.getElementById('last-time-dianying')?.setAttribute('value', activeTime);
        document.getElementById('last-time-shehui')?.setAttribute('value', activeTime);
        document.getElementById('last-time-ditu')?.setAttribute('value', activeTime);
    }
    
    // 实现工具栏拖动功能
    function enableToolbarDragging() {
        const toolbars = document.querySelectorAll('.grid-tools');
        
        toolbars.forEach(function(toolbar) {
            let isDragging = false;
            let offsetX, offsetY;
            let originalWidth, originalHeight;
            let handle = toolbar.querySelector('.tools-handle');
            
            if (!handle) {
                // 如果没有handle元素，创建一个
                handle = document.createElement('div');
                handle.className = 'tools-handle';
                // 不添加文字内容，使用纯图形拖动句柄
                toolbar.insertBefore(handle, toolbar.firstChild);
            }
            
            // 开始拖动的共享函数
            function startDragging(clientX, clientY) {
                isDragging = true;
                
                // 获取工具栏相对于视口的位置
                const toolbarRect = toolbar.getBoundingClientRect();
                offsetX = clientX - toolbarRect.left;
                offsetY = clientY - toolbarRect.top;
                
                // 保存工具栏原始大小
                originalWidth = toolbar.offsetWidth;
                originalHeight = toolbar.offsetHeight;
                
                // 提高z-index确保在最上层
                toolbar.style.zIndex = '1000';
            }
            
            // 拖动过程的共享函数
            function doDragging(clientX, clientY) {
                if (!isDragging) return;
                
                // 获取父容器
                const container = toolbar.closest('.button-container');
                if (!container) return;
                
                const containerRect = container.getBoundingClientRect();
                
                // 计算新位置（相对于父容器）
                let newX = clientX - containerRect.left - offsetX;
                let newY = clientY - containerRect.top - offsetY;
                
                // 限制在容器内
                newX = Math.max(0, Math.min(newX, containerRect.width - originalWidth));
                newY = Math.max(0, Math.min(newY, containerRect.height - originalHeight));
                
                // 设置工具栏位置
                toolbar.style.position = 'absolute';
                toolbar.style.left = newX + 'px';
                toolbar.style.top = newY + 'px';
                // 保持工具栏原始大小不变
                toolbar.style.width = originalWidth + 'px';
                toolbar.style.height = originalHeight + 'px';
            }
            
            // 结束拖动的共享函数
            function endDragging() {
                isDragging = false;
            }
            
            // 为handle添加mousedown事件（桌面端）
            handle.addEventListener('mousedown', function(e) {
                startDragging(e.clientX, e.clientY);
                // 防止文本选择
                e.preventDefault();
            });
            
            // 为handle添加touchstart事件（移动端）
            handle.addEventListener('touchstart', function(e) {
                // 只处理单个触摸
                if (e.touches.length === 1) {
                    startDragging(e.touches[0].clientX, e.touches[0].clientY);
                    // 防止默认行为和滚动
                    e.preventDefault();
                }
            });
            
            // 全局mousemove事件处理拖动（桌面端）
            document.addEventListener('mousemove', function(e) {
                doDragging(e.clientX, e.clientY);
            });
            
            // 全局touchmove事件处理拖动（移动端）
            document.addEventListener('touchmove', function(e) {
                // 只处理单个触摸
                if (e.touches.length === 1) {
                    doDragging(e.touches[0].clientX, e.touches[0].clientY);
                    // 当正在拖动时防止页面滚动
                    if (isDragging) {
                        e.preventDefault();
                    }
                }
            });
            
            // 全局mouseup事件结束拖动（桌面端）
            document.addEventListener('mouseup', endDragging);
            
            // 全局touchend事件结束拖动（移动端）
            document.addEventListener('touchend', endDragging);
            
            // 全局touchcancel事件也需要结束拖动（例如当触摸被意外中断时）
            document.addEventListener('touchcancel', endDragging);
        });
    }
    
    // 页面加载完成后启用拖动功能并同步标签值
    window.addEventListener('load', function() {
        enableToolbarDragging();
        syncAllTabValues(); // 同步所有标签页的颜色和时间值
        
        // 为所有颜色选择器添加输入事件监听器
        const colorPickers = document.querySelectorAll('input[type="color"]');
        colorPickers.forEach(function(colorPicker) {
            colorPicker.addEventListener('input', function() {
                // 当颜色选择器值改变时，同步所有标签页的颜色值
                syncAllTabValues();
            });
        });
    });


    // 为每个选项卡绑定点击事件（顶部标签已隐藏，但逻辑保留）
    document.querySelectorAll('.tab-button').forEach(function (tab) {
        tab.addEventListener('click', function () {
            // 移除所有选项卡的激活状态
            document.querySelectorAll('.tab-button').forEach(function (tab) {
                tab.classList.remove('active');
            });
            // 移除所有内容的激活状态
            document.querySelectorAll('.tab-content').forEach(function (content) {
                content.classList.remove('active');
            });

            // 切换标签时关闭所有悬浮框
            document.querySelectorAll('.popover').forEach(function (p) {
                p.style.display = 'none';
            });

            // 添加激活状态到当前点击的选项卡和对应的内容
            var tabId = this.id.replace('tab-', '');
            if (tabId !== 'ditu') { // 地图不请求后台刷新
            refreshContent(tabId);
            }
            document.getElementById('content-' + tabId).classList.add('active');
            this.classList.add('active');
            // 同步侧边菜单的激活项
            document.querySelectorAll('#sideMenu .menu-item').forEach(function (mi) { mi.classList.remove('active'); });
            var menuItem = document.querySelector('#sideMenu .menu-item[data-tab="' + tabId + '"]');
            if (menuItem) { menuItem.classList.add('active'); }
            
            // 更新last-time组件的可见性
            updateLastTimeVisibility(tabId);
            
            if (tabId === 'ditu') {
                document.body.classList.remove('bg-gif');
                document.body.classList.add('no-bg');
                if (typeof map !== 'undefined') { map.resize(); }
            } else {
                document.body.classList.add('bg-gif');
                document.body.classList.remove('no-bg');
            }
            
            // 同步所有标签页的颜色和时间值
            syncAllTabValues();
        });
    });
    // 左侧菜单逻辑
    var sideMenu = document.getElementById('sideMenu');
    document.getElementById('menuToggle').addEventListener('click', function () {
        sideMenu.classList.toggle('open');
    });
    sideMenu.addEventListener('click', function (e) {
        if (e.target && e.target.classList.contains('menu-item')) {
            var tabId = e.target.getAttribute('data-tab');
            // 关闭所有激活状态
            document.querySelectorAll('.tab-button').forEach(function (tab) { tab.classList.remove('active'); });
            document.querySelectorAll('.tab-content').forEach(function (content) { content.classList.remove('active'); });
            document.querySelectorAll('#sideMenu .menu-item').forEach(function (mi) { mi.classList.remove('active'); });
            // 切换时关闭悬浮
            document.querySelectorAll('.popover').forEach(function (p) { p.style.display = 'none'; });
            // 激活目标内容
            if (tabId !== 'ditu') { refreshContent(tabId); }
            document.getElementById('content-' + tabId).classList.add('active');
            // 激活对应的顶部标签按钮
            var tabButton = document.getElementById('tab-' + tabId);
            if (tabButton) { tabButton.classList.add('active'); }
            e.target.classList.add('active');
            // 同步地图背景与缩放
            updateLastTimeVisibility(tabId);
            
            if (tabId === 'ditu') {
                document.body.classList.remove('bg-gif');
                document.body.classList.add('no-bg');
                if (typeof map !== 'undefined') { map.resize(); }
            } else {
                document.body.classList.add('bg-gif');
                document.body.classList.remove('no-bg');
            }
            // 收起菜单
            sideMenu.classList.remove('open');
            
            // 同步所有标签页的颜色和时间值
            syncAllTabValues();
        }
    });
    // 点击外部收起菜单
    document.addEventListener('click', function (e) {
        var isMenu = e.target.closest('#sideMenu');
        var isToggle = e.target.closest('#menuToggle');
        if (!isMenu && !isToggle) { sideMenu.classList.remove('open'); }

        // 点击悬浮窗外关闭用户信息面板（不影响头像上传弹窗）
        var userPanel = document.getElementById('userPanel');
        var isUserPanel = e.target.closest('#userPanel');
        var isUserAvatar = e.target.closest('#userAvatar');
        var isAvatarModal = e.target.closest('#avatarModal');
        if (userPanel && userPanel.style.display === 'block') {
            if (!isUserPanel && !isUserAvatar && !isAvatarModal) {
                userPanel.style.display = 'none';
            }
        }
    });

    // 刷新数据的函数
    function refreshContent(tabId) {
        // 这里可以写AJAX请求来获取数据
        // 假设我们有一个API端点来获取数据
        var csrftoken = $('input[name=csrfmiddlewaretoken]').val(); // 获取CSRF令牌

        // 发送GET请求
        $.ajax({
            url: '/biaoqian/',
            type: 'POST',
            data: {'q': tabId},
            headers: {
                'X-CSRFToken': csrftoken
            },
            success: function (data) {
                data.forEach(function (item) {
                    var button = document.getElementById('button-' + item.button);
                            button.style.backgroundColor = item.color;
                });
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.error('Error fetching data: ', textStatus, errorThrown);
            }
        });
    }

    // ---------------- 地图模块（整合自 map.html） ----------------
    var map;
    var geolocation;
    (function initMapOnce() {
        var container = document.getElementById('container');
        if (!container) return;
        map = new AMap.Map('container', {
            resizeEnable: true,
            zoom: 11,
        });
        document.getElementById('zoomInBtn').addEventListener('click', function () { map.zoomIn(); });
        document.getElementById('zoomOutBtn').addEventListener('click', function () { map.zoomOut(); });

        AMap.plugin('AMap.Geolocation', function () {
            geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,
                timeout: 10000,
                buttonPosition: 'RB',
                buttonOffset: new AMap.Pixel(10, 20),
                zoomToAccuracy: true,
                showCircle: false,
            });
            map.addControl(geolocation);
            geolocation.getCurrentPosition(function (status, result) {
                if (status == 'complete') {
                    onLocateComplete(result);
                } else {
                    onLocateError(result);
                }
            });
        });

        function onLocateComplete(data) {
            var maxZoom = (map.getZooms && map.getZooms()[1]) ? map.getZooms()[1] : 18;
            map.setZoomAndCenter(maxZoom, [data.position.lng, data.position.lat]);
        }
        function onLocateError() {
            alert('定位失败，请稍后重试');
        }

        document.getElementById('changeToNormal').addEventListener('click', function () { map.setLayers([new AMap.TileLayer()]); });
        document.getElementById('changeToSatellite').addEventListener('click', function () { map.setLayers([new AMap.TileLayer.Satellite()]); });
        document.getElementById('changeToRoadNet').addEventListener('click', function () { map.setLayers([new AMap.TileLayer.RoadNet()]); });
        document.getElementById('changeToBuildings').addEventListener('click', function () { map.setLayers([new AMap.Buildings()]); });

        map.on('click', function (e) {
            var location = e.lnglat.toString();
            fetch('/getaddress/?location=' + location)
                .then(response => response.json())
                .then(data => {
                    if (data.status === '1') {
                        var info = data.regeocode.formatted_address;
                        var marker = new AMap.Marker({ position: e.lnglat, map: map });
                        var infoWindow = new AMap.InfoWindow({ content: info, offset: new AMap.Pixel(0, -30) });
                        infoWindow.open(map, e.lnglat);
                    }
                });
        });

        function drawSquare(lng, lat) {
            var squareSize = 50; // 米
            var southWest = new AMap.LngLat(lng - squareSize / 2 / 111000, lat - squareSize / 2 / 111000);
            var northEast = new AMap.LngLat(lng + squareSize / 2 / 111000, lat + squareSize / 2 / 111000);
            var bounds = new AMap.Bounds(southWest, northEast);
            var fillColor = document.getElementById('fillColor').value;
            var rectangle = new AMap.Rectangle({
                bounds: bounds,
                strokeColor: fillColor,
                strokeWeight: 2,
                strokeOpacity: 0.1,
                strokeStyle: 'solid',
                fillColor: fillColor,
                fillOpacity: 1,
                cursor: 'pointer',
                zIndex: 50
            });
            map.add(rectangle);
            map.setFitView([rectangle]);
            rectangle.on('click', function (e) {
                var infoWindow = new AMap.InfoWindow({ content: '用户名 输入内容', offset: new AMap.Pixel(0, -30) });
                infoWindow.open(map, e.lnglat);
            });
        }

        document.getElementById('drawSquareBtn').onclick = function () {
            map.plugin('AMap.Geolocation', function () {
                var geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true,
                    timeout: 10000,
                    buttonOffset: new AMap.Pixel(10, 20),
                    zoomToAccuracy: true,
                    buttonPosition: 'RB',
                    showCircle: false,
                    showButton: false,
                    showMarker: false,
                });
                map.addControl(geolocation);
                geolocation.getCurrentPosition(function (status, result) {
                    if (status === 'complete') {
                        var lng = result.position.lng;
                        var lat = result.position.lat;
                        drawSquare(lng, lat);
                    } else {
                        alert('定位失败，请重试。');
                    }
                });
            });
        };

        // 手动定位按钮：放大至最大并居中
        document.getElementById('locateBtn').addEventListener('click', function () {
            if (!geolocation) { return; }
            geolocation.getCurrentPosition(function (status, result) {
                if (status === 'complete') {
                    onLocateComplete(result);
                } else {
                    onLocateError(result);
                }
            });
        });
    })();

    // ---------------- 绘制格子缩放控件 ----------------
    (function initGridZoom() {
        var minSize = 4, maxSize = 24;
        var saved = localStorage.getItem('gridCellSize');
        if (saved) { document.documentElement.style.setProperty('--cell-size', saved + 'px'); }
        updateGridLabels();

        function updateGridLabels() {
            var size = getComputedStyle(document.documentElement).getPropertyValue('--cell-size').trim();
            document.querySelectorAll('#gridSizeLabel').forEach(function(el){ el.textContent = size; });
        }
        function setSize(newPx) {
            newPx = Math.min(maxSize, Math.max(minSize, newPx));
            document.documentElement.style.setProperty('--cell-size', newPx + 'px');
            localStorage.setItem('gridCellSize', newPx);
            updateGridLabels();
        }
        document.querySelectorAll('.grid-plus').forEach(function(btn){ btn.addEventListener('click', function(){
            var cur = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--cell-size')) || 10;
            setSize(cur + 2);
        });});
        document.querySelectorAll('.grid-minus').forEach(function(btn){ btn.addEventListener('click', function(){
            var cur = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--cell-size')) || 10;
            setSize(cur - 2);
        });});
    })();

</script>

<!-- 悬浮：搜索面板 -->
<div id="searchPanel" class="floating-panel">
    <div class="panel-header">
        <h3>搜索</h3>
        <button class="panel-close" onclick="document.getElementById('searchPanel').style.display='none'">×</button>
    </div>
    <div class="search-container">
        <form id="searchForm" method="post" action= "." >
            {% csrf_token %}
            <input type= "text" id= "searchInput" name= "searchQuery" placeholder= "搜索标签..." >
            <button type= "submit" id= "searchButton" >搜索</button>
        </form>
        <ul id= "searchResults" >
            {% for result in search_results %}
                <li>{{ result }}</li>
            {% empty %}
                <li>热点数据（还没做）</li>
            {% endfor %}
        </ul>
    </div>
    <div class= "qi-gai" style= "position: static; z-index: 1;" >
        <div class= "photo" ><img src= {% static 'image/qi-gai.jpg' %} alt= "感谢打赏❀" ></div>
        <p>❀感谢打赏❀</p>
        <p>❀打赏备注用户名❀</p>
        <p>❀1元=100积分❀</p>
    </div>
    </div>

<!-- 悬浮：用户信息面板 -->
<div id="userPanel" class="floating-panel">
    <div class="panel-header">
        <h3>用户信息</h3>
        <button class="panel-close" onclick="document.getElementById('userPanel').style.display='none'">×</button>
    </div>
    <div class="other_info" id="profileContainer">
        <div class="container">
            <div id="other_photo" class="photo">
                {% if user_info.avatar_url %}
                    <img id="userAvatar1" src="{{ user_info.avatar_url }}" alt="User Avatar" onclick="openModal()">
                {% else %}
                    <img id="userAvatar1" src="{% static 'image/33.png' %}" alt="User Avatar" onclick="openModal()">
                {% endif %}
            </div>
            <div class="info">
                <div id="info-container">
                    <h2 id="other_name" class="name">{{ user_info.username }}</h2>
                    <img class="company" id="company"  src="{% if user_info.user_level == 0 %} {% static 'image/person.png' %} {% elif user_info.user_level == 1 %} {% static 'image/real_person.png' %} {% elif user_info.user_level == 2 %} {% static 'image/one_person.png' %} {% elif user_info.user_level == 3 %} {% static 'image/company.png' %} {% else %} {% static 'image/company.png' %} {% endif %}" alt="等级图片">
                </div>
                <p class="is-realname-authenticated" id="is-realname-authenticated">是否实名: {{ user_info.is_realname_authenticated }}</p>
                <p class="fans-count" id="fans-count"></p>
                <p class="following-count" id="following-count"></p>
                <!-- 用户经验和积分显示 -->
                <p class="user-experience" id="uhc-exp-text">当前经验值: {{ user_info.user_experience }}</p>
                <p class="user-points" id="uhc-points-text">当前积分: {{ user_info.user_points }}</p>
                <script>
                    // 初始化粉丝数和关注数的显示
                    document.addEventListener('DOMContentLoaded', function() {
                        const fansCountElement = document.getElementById('fans-count');
                        const followingCountElement = document.getElementById('following-count');
                        if (fansCountElement) {
                            fansCountElement.textContent = `粉丝数: {{ user_info.fans_count }}`;
                        }
                        if (followingCountElement) {
                            followingCountElement.textContent = `关注数: {{ user_info.following_count }}`;
                        }
                    });
                </script>
            </div>
        </div>
    </div>
    </div>

<!-- 头像上传 Modal 移到用户面板后，点击用户面板头像触发 -->
<div id="avatarModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        <p>上传新头像:</p>
        <form id="avatarForm">
            <input type="file" name="avatar" accept="image/*" onchange="previewFile()">
            <img id="previewAvatar" src="" alt="Avatar Preview" hidden>
            <button type="button" onclick="uploadAvatar()">上传</button>
        </form>
    </div>
    </div>

<script>
    // 打开搜索悬浮
    document.getElementById('openSearch').addEventListener('click', function() {
        var panel = document.getElementById('searchPanel');
        panel.style.display = panel.style.display === 'none' || panel.style.display === '' ? 'block' : 'none';
    });
    // 点击头像打开用户面板
    document.getElementById('userAvatar').addEventListener('click', function() {
        var panel = document.getElementById('userPanel');
        panel.style.display = panel.style.display === 'none' || panel.style.display === '' ? 'block' : 'none';
    });
    
    // 修复CSS问题
    $(function() {
        // 移除可能导致拖动问题的CSS样式
        $('.grid-tools input[type="color"], .grid-tools input[type="number"]').css({
            'position': 'relative',
            'float': 'none',
            'vertical-align': 'middle'
        });
        
        // 移除拖动时可能导致元素下移的:active缩放效果
        $('.grid-tools').css('transform', 'none');
        
        // 实现grid-tools元素的拖动功能
        $('.grid-tools').draggable({
            containment: 'parent', // 限制在父容器内拖动
            cursor: 'move', // 鼠标样式
            handle: '.tools-handle', // 设置拖动句柄，只有点击这个区域才能拖动
            
            // 拖动开始前保存宽度并设置固定宽度
            start: function(event, ui) {
                // 保存原始宽度并设置为固定宽度
                $(this).data('originalWidth', $(this).width());
                $(this).width($(this).width());
                
                // 重要：不要将所有子元素都设置为相对定位，这会导致布局问题
                // 只需要确保它们不使用绝对定位即可
                $(this).find('*').css('position', function(i, value) {
                    // 只修改绝对定位的元素
                    return value === 'absolute' ? 'relative' : value;
                });
                $(this).find('*').css('float', 'none');
            },
            
            // 拖动结束后保持固定宽度
            stop: function(event, ui) {
                $(this).width($(this).data('originalWidth'));
            },
            
            // 拖动过程中确保flex布局正确
            drag: function(event, ui) {
                $(this).css({
                    'display': 'flex',
                    'align-items': 'center',
                    'flex-wrap': 'nowrap',
                    'transform': 'none' // 确保拖动时没有缩放效果
                });
            }
        });
        
        // 确保所有grid-tools元素有正确的基础样式
        $('.grid-tools').each(function() {
            $(this).css({
                'display': 'flex',
                'align-items': 'center',
                'justify-content': 'flex-start',
                'flex-wrap': 'nowrap',
                'box-sizing': 'border-box',
                'transform': 'none' // 确保没有缩放效果
            });
        });
    });
    
    // 增加用户统计数据的函数
    function increaseUserStats() {
        // 获取CSRF令牌
        const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
        
        // 向服务器发送请求，增加用户经验、积分、关注数量和粉丝数量
        fetch('/increase_user_stats/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrftoken
            },
            body: JSON.stringify({})
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                console.log('用户统计数据已更新:', data);
                
                // 更新页面上显示的用户数据
                // 更新粉丝数量
                const fansCountElement = document.getElementById('fans-count');
                if (fansCountElement) {
                    fansCountElement.textContent = `粉丝数: ${data.followers_count}`;
                } else {
                    console.log('未找到粉丝数量显示元素');
                }
                
                // 更新关注数量
                const followingCountElement = document.getElementById('following-count');
                if (followingCountElement) {
                    followingCountElement.textContent = `关注数: ${data.following_count}`;
                } else {
                    console.log('未找到关注数量显示元素');
                }
                
                // 更新用户经验和积分
                const expEl = document.getElementById('uhc-exp-text');
                const ptsEl = document.getElementById('uhc-points-text');
                
                if (expEl) {
                    expEl.textContent = `当前经验值: ${data.user_experience}`;
                } else {
                    console.log('未找到经验值显示元素');
                }
                
                if (ptsEl) {
                    ptsEl.textContent = `当前积分: ${data.user_points}`;
                } else {
                    console.log('未找到积分显示元素');
                }
            }
        })
        .catch(error => {
            console.error('更新用户统计数据失败:', error);
        });
    }
</script>

</body>
</html>
